<template name="carList">
	<view class="carOuter">
		<image src="../../static/tu/rental cars_1.png" class="imgLeft"></image>
		<view class="msgRight">
			<view class="date">
				<view class="dateTimeLeft">
					<p>{{startCity}}</p>
					<p style="font-size: 20rpx;">{{startDate}}</p>
				</view>
				<view class="dateTimeCenter">
					<image class="arrow" src="../../static/tu/rentalcars_rightarrow.png"></image>
				</view>
				<view class="dateTimeRight">
					<p>{{endCity}}</p>
					<p style="font-size: 20rpx;">{{endDate}}</p>
				</view>
			</view>
			<u-line length="100%"></u-line>
			<view class="rightDown">
				<p class="position">A车/5座/2.0T</p>
				<p class="money">￥{{money}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "carList",
		data() {
			return {
				money:Math.floor(Math.random() * (500 - 100 + 1)) + 100,//Math.floor(Math.random() * (max - min + 1)) + min
			};
		},
		props: {
			startCity:String,
			endCity:String,
			startDate:String,
			endDate:String,
			positionMsg:String
		}
	}
</script>

<style>
	.carOuter {
		height: 200rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.imgLeft {
		margin-left: 20rpx;
		width: 150rpx;
		height: 90rpx;
	}

	.msgRight {
		margin-left: 20rpx;
		width: 70%;
	}

	.date {
		flex-flow: row;
		justify-content: flex-end;
		display: flex;
		margin-bottom: 20rpx;
	}

	.dateTimeLeft {
		display: flex;
		flex-direction: column;
		width: 40%;
	}

	.dateTimeCenter {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 20%;
	}

	.dateTimeCenter image {
		width: 80rpx;
		height: 15rpx;
	}

	.dateTimeRight {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		width: 40%;
	}

	.rightDown {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.position {
		margin-left: 10rpx;
		width: 80%;
		font-size: 20rpx;
	}

	.money {
		width: 10%;
		color: red;
	}
</style>